<template>
  <div id="Home">
    <header>
      <div class="head">
        <img src="../assets/img/logo.png" alt />
        <ul>
          <li>
            <span @click="handleSelect('/Course')">免费课程</span>
          </li>
          <li>
            <span @click="handleSelect('/Combat')">实战课程</span>
          </li>
          <li>
            <span @click="handleSelect('/GoldPosition')">金职位</span>
          </li>
        </ul>
        <div class="search">
          <input type="text" placeholder="请输入关键字..." />
          <a>Vue</a>
          <a>Python</a>
          <el-button class="btn" icon="el-icon-search" round></el-button>
        </div>
        <div class="headR">
          <ul>
            <li>
              <span href>下载APP</span>
            </li>
            <li>
              <div class="d shopping1">
                <span class="cart el-icon-shopping-cart-2">购物车</span>
                <el-card shadow="always" class="shopping">
                  <div class="shopBox">
                    <div>我的购物车</div>
                    <div>已加入1门课程</div>
                  </div>
                  <div class="shopBox1">
                    <div class="shopBox1-bigbox">
                      <img src="../assets/ZWTimg/shop1.png" alt />
                      <div class="shopBox1-box">
                        <div>Java企业级支付全家桶设计与实战</div>
                        <div class="shopBox1-box-pri">￥328</div>
                        <div class="shopBox1-box-del">删除</div>
                      </div>
                    </div>
                  </div>
                  <div class="shopBox2">
                    <div>1个订单未结算，</div>
                    <button class="gotocart" type="danger" round size="small" @click="handleSelect('/shop')">去购物车</button>
                  </div>
                </el-card>
              </div>
            </li>
            <li 
              @click="loginReg(true)"
              v-if="userInfo.authToken === undefined"
              >
              <span href>登录/注册</span>
            </li>
            <li class="usre" v-if="userInfo.authToken !== undefined">
                <div>  
                  <div class="el-icon-message"></div>
                  <div class=""><span @click="handleSelect('/My')">我的课程</span></div>
                  <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                </div>
            </li>
          </ul>
        </div>
      </div>
    </header>
    <nav>
      <!-- 分类 -->
      <ul class="classification">
        <li v-for="(item,index) in 6" :key="index">
          <div class="zz">
            前端/小程序/JS
            <div class="eject">
              <div class="gotolist">
                <span>前端开发</span>
              </div>
              <div class="tolist">
                <firstlist v-for="item in 4" :key="item" />
              </div>
            </div>
          </div>
        </li>
      </ul>
      <!-- 轮播图 -->
      <div class="lun">
        <el-carousel indicator-position="outside" height="382px">
          <el-carousel-item v-for="item in 4" :key="item">
            <img src="../assets/img/lun1.jpg" alt />
          </el-carousel-item>
        </el-carousel>
      </div>
    </nav>
    <column name="job">
      <div class="container">
        <p class="types-title">
          <span>零基础就业</span>
          <span class="intro">从入门到具备1年开发经验</span>
        </p>
        <div class="path-list">
          <a href v-for="item in 4" :key="item">
            <i class="i-java"></i>
            <p class="tit">Java工程师2020</p>
            <p class="desc">综合就业排名第一</p>
          </a>
        </div>
      </div>
      <div class="container-types">
        <p class="types-title">
          <span>职场提升</span>
          <span class="intro">1年以上开发经验系统成长</span>
        </p>
        <div class="path-list">
          <a href v-for="item in 4" :key="item">
            <p class="tit">Java架构师</p>
            <p class="desc">跟随千万级项目从0到100一起成长</p>
          </a>
        </div>
      </div>
    </column>
    <menu>
      <div class="types-title">
        <p>新上好课</p>
      </div>
      <div class="navDetail">
        <typesContent v-for="item in 8" :key="item" />
      </div>
    </menu>
    <submenu>
      <div class="path">
        <div class="types-title">
          <p>学习路径</p>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="前端" name="first">
              <Route v-for="item in 6" :key="item" />
            </el-tab-pane>
            <el-tab-pane label="Java">
              <Route v-for="item in 4" :key="item" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </submenu>
    <menu>
      <div class="types-title">
        <p>热门课程</p>
      </div>
      <el-tabs v-model="MenuName" @tab-click="handleClickMenu">
        <el-tab-pane label="实战课程" name="first">
          <typesContent v-for="item in 8" :key="item" />
        </el-tab-pane>
        <el-tab-pane label="免费课程">
          <typesContent v-for="item in 6" :key="item" />
        </el-tab-pane>
      </el-tabs>
    </menu>
    <service>
      <div class="Column">
        <div class="types-title">
          <p>慕课专栏</p>
        </div>
        <div class="navDetail clearfix">
          <moocColumn v-for="item in 6" :key="item" />
        </div>
      </div>
    </service>
    <loginReg />
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
import typesContent from "../components/typesContent";
import Route from "../components/Route";
import moocColumn from "../components/moocColumn";
import firstlist from "../components/firstlist";
import loginReg from "../views/loginRes";

export default {
  created() {
    this.userInfo = JSON.parse(localStorage.getItem('data'))
    if(this.userInfo === null){
      this.userInfo = {}
    }
    // console.log(this.userInfo.authToken)
  },
  components: {
    typesContent,
    Route,
    moocColumn,
    firstlist,
    loginReg,
  },
  computed: {...mapState({
      b:state=>state.logReg[0].b,
    }),},
  data() {
    return {
      userInfo:{},
      activeName: "first",
      MenuName: "first",
      isActive: 0
    };
  },
  watch:{//watch监听
    b:{
        handler:function(){
            this.userInfo = JSON.parse(localStorage.getItem('data'))
              if(this.userInfo === null){
                this.userInfo = {}
              }
        },
        deep:true //是否为深监听
    }
    },
  methods: {
    //显示登录
    ...mapMutations(["loginReg"]),

    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClickMenu(tab, event) {
      console.log(tab, event);
    },

    //导航菜单切换
    handleSelect(path) {
      let n = path.split("=")[1];
      this.isActive = n;
      // console.log(path)
      this.$router.push({
        path
      });
    }
  }
};
</script>
<style scoped>
@import url("../assets/css/Home.css");
</style>
